<template>
  <div class="main">
    <div class="contain">
        <div class="main-title">Introduction to Flower Information： </div>
        <div class="default-img">
            <img src="@/assets/6.jpg" class="imageA"/>
            <img src="@/assets/7.jpg" class="imageB"/>
        </div>
        <div class="aside">
            <div class="box">
                <div class="tab">别名:</div>
                <div class="tab-text">{{ name }}</div>
            </div>
            <div class="box">
                <div class="tab">产地:</div>
                <div class="tab-text">{{ origin }}</div>
            </div>
            <div class="box">
                <div class="tab">季节:</div>
                <div class="tab-text">{{ scence }}</div>
            </div>
            <div class="box">
                <div class="tab">日照要求:</div>
                <div class="tab-text">{{ sunshine }}</div>
            </div>
            <div class="box">
                <div class="tab">温度要求:</div>
                <div class="tab-text">{{ temperature }}</div>
            </div>
            <div class="box-bottom">
                <div class="bottom-text">其他：<span>{{ other }}</span></div>
            </div>
        </div>
    </div>   

  </div>
</template>

<script>
export default {
    name: 'Introduce',
    data() {
      return {
        name: '鲜花的另外一种名称或称呼。在不同地区或文化中，鲜花可能有多个常用的名称。这些别名可以是基于花朵的特征、颜色、形状、香气、用途或传统含义等方面。', 
        origin:'鲜花生长和培育的地理位置或区域。它表示鲜花种植的起源地或主要生产地点。',
        scence:'特定花卉在一年中生长和盛开的季节。不同类型的鲜花有各自的生长和盛花季节，这与它们的生长习性、光照需求、温度要求和生命周期等因素有关。',
        sunshine :'鲜花种植过程中对阳光照射的需求程度。',
        temperature:'鲜花生长和开花所需要的适宜温度范围。不同的鲜花品种对温度有不同的要求，过高或过低的温度可能会对鲜花的生长和开花产生不良影响。',
        other:'鲜花的生长和开花受到多个因素的影响。适宜的日照、温度和季节是鲜花能够正常生长和开放花朵的关键因素。此外，适量的水分和良好的土壤质量提供了必要的营养和生长环境。正确的施肥和病虫害防治有助于保持鲜花的健康和抵抗力。定期的剪辑和修剪可以促进新的花朵生长和保持良好的外观。'
      };
    }

}
</script>

<style scoped>
.main[data-v-bd83e6a4] {
    display: flex;
    justify-content: center;
    align-items: center;

}
.contain{
    background: linear-gradient(310deg, #ffeded5c, #ffc386bd);
    height: 510px;
    width: 1400px;
    justify-content: space-between;
    margin: 1%;
    display: flex;
}
.main-title{
    font-family: serif;
    font-size: 20px;
    font-weight: bold;
    font-style: oblique;
    color: #d56262;
    width: 44%;
    height: 63px;
    padding: 10px;
    line-height: 63px;
    float: left;
    margin-left: 2%;
    text-shadow: 2px 1px 2px #d06f3bd9;
}
.default-img{
    position: absolute;
    float: left;
    margin-top: 102px;
    margin-left: 50px;
    width: 500px;
    height: 370px;
}
.imageA{
    width: 65%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    float: left;

}
.imageB{
    width: 40%;
    margin-left: -19%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    margin-top: 36%;
}
.aside{
    width: 56%;
    height: 100%;
    float: right;
    margin-top: 80px;
}
.box{
    width: 100%;
    height: 11%;
    /* background-color: aquamarine; */
}
.tab{
    width: 15%;
    height: 38px;
    background-color: #ebac869e;
    line-height: 38px;
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
    font-family: cursive;
    float: left;
}
.tab-text{
    width: 60%;
    height: 40px;
    /* background-color: bisque; */
    float: left;
    border-radius: 10px;
    font-size: 14px;
    /* text-align: center; */
    font-family: cursive;
    margin-left: 5%;
}
.box-bottom{
    height: 102px;
    width: 90%;
    border-radius: 5px;
    background-color: #f9e4d1;
    margin-top: 20px;
}
.bottom-text{
    font-size: 15px;
    font-family: cursive;
    line-height: 18px;
    padding: 5px;
}
.bottom-text span{
    font-size: 12px;
    font-family: cursive;

}
</style>